<template>
<div>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>业务类型</span>
			<el-button style="float: right; padding: 3px 0" type="text" @click="addbusinessType('add')">
				添加业务类型
			</el-button>
		</div>
		<div style="overflow-x: auto">
			<ul class="businessType">
				<li v-for="item in businessType">
					<span>{{ item.name }}</span>
					<span>{{ item.state == 0 ? '已开启' : '未开启' }}</span>
					<el-button type="primary" size="mini" @click="addbusinessType('edit',item)">编辑
					</el-button>
				</li>
			</ul>
		</div>
	</el-card>
	<!--	编辑业务类型-->
	<el-dialog :title="businessTypeform.titleName" :visible.sync="businessTypeform.dialogFormVisible" width="500px">
		<el-form :model="businessTypeformData" :rules="businessTypeform.rules" ref="ruleForm" label-width="120px">
			<el-form-item label="类型" prop="type">
				<el-input class="w200" v-model="businessTypeformData.input" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="业务类型开关" prop="type">
				<el-switch
					v-model="businessTypeformData.value"
					active-color="#13ce66"
					inactive-color="#ff4949">
				</el-switch>
			</el-form-item>
			<el-form-item label="显示位置" prop="type">
				<el-checkbox-group v-model="businessTypeformData.checkList">
					<el-checkbox label="小程序"></el-checkbox>
					<el-checkbox label="司机端"></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="默认价格表" prop="reason">
				<el-input class="w200" v-model="businessTypeformData.reason" type="textarea"
						  :rows="2"></el-input>
			</el-form-item>
			<el-form-item label="默认抽成方式" prop="reason">
				<el-input class="w200" v-model="businessTypeformData.reason" type="textarea"
						  :rows="2"></el-input>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cancelBusinessType">取 消</el-button>
			<el-button type="primary" @click="submitBusinessType">确 定</el-button>
		</div>
	</el-dialog>

</div>
</template>

<script>
export default {
	name: 'businessType',
	data(){
		return{
			businessTypeformData: {},
			businessTypeform: {
				titleName: '',
				dialogFormVisible: false,
				form: {},
				rules: {
					type: [
						{required: true, message: '请选择原因类型', trigger: 'change'},
					],
					reason: [
						{required: true, message: '请输入原因', trigger: 'blur'},
					],
				}
			},
			businessType: [
				{name: '酒后代驾', state: 0},
				{name: '酒后代驾1', state: 0},
				{name: '酒后代驾2', state: 0},
				{name: '酒后代驾2', state: 0},
				{name: '酒后代驾2', state: 0},
				{name: '酒后代驾2', state: 0},
				{name: '酒后代驾2', state: 0},
				{name: '酒后代驾2', state: 0},
			],
		}
	},
	methods:{
		addbusinessType (state, item) {
			switch (state) {
				case 'add':
					this.businessTypeform.dialogFormVisible = true
					this.businessTypeform.titleName = '新增业务类型'
					this.businessTypeformData = {}
					break
				case 'edit':
					this.businessTypeform.dialogFormVisible = true
					this.businessTypeform.titleName = '编辑业务类型'
					this.businessTypeformData = {}
					break
			}
		},
		cancelBusinessType () {
			this.businessTypeform.dialogFormVisible = false
			this.businessTypeform.titleName = ''
			this.businessTypeformData = {}
		},
		submitBusinessType () {
			this.cancelBusinessType()
		},
	}
}
</script>

<style scoped>
.w200 {
	width: 300px !important;
}

.businessType {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.businessType li {
	border: 1px solid #00a0e9;
	border-radius: 10px;
	width: 400px;
	height: 100px;
	padding: 20px;
	line-height: 100px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-right: 20px;
}
</style>
